{% extends 'base.html' %}
{% load static %}

{% block title %}仪表盘{% endblock %}

{% block content %}
<div class="row">
    <!-- 侧边栏（与admin_home一致） -->
    <div class="col-md-3 col-lg-2 sidebar p-3">
        <div class="list-group">
            <a href="{% url 'dashboard' %}" class="list-group-item list-group-item-action active" data-target="content-dashboard">仪表盘</a>
            <a href="{% url 'user_manage' %}" class="list-group-item list-group-item-action">用户管理</a>
            <a href="{% url 'content_manage' %}" class="list-group-item list-group-item-action">内容管理</a>
            <a href="{% url 'system_config' %}" class="list-group-item list-group-item-action">系统配置</a>
            <a href="{% url 'data_statistics' %}" class="list-group-item list-group-item-action">数据统计</a>
            <a href="{% url 'log_manage' %}" class="list-group-item list-group-item-action">日志管理</a>
            <a href="{% url 'message_center' %}" class="list-group-item list-group-item-action">消息中心</a>
            <a href="{% url 'help_document' %}" class="list-group-item list-group-item-action">帮助文档</a>
        </div>
    </div>

    <!-- 内容区域 -->
    <div class="col-md-9 col-lg-10 p-4" id="content-dashboard">
        <h3 class="mb-4">系统数据概览</h3>
        <!-- 数据卡片模块 -->
        <div class="row g-4 mb-4">
            <div class="col-md-3">
                <div class="card bg-primary text-white">
                    <div class="card-body">
                        <h6 class="card-title">月销售量</h6>
                        <p class="card-text display-6" id="month-sales">--</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-success text-white">
                    <div class="card-body">
                        <h6 class="card-title">用户访问量</h6>
                        <p class="card-text display-6" id="user-views">--</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-warning">
                    <div class="card-body">
                        <h6 class="card-title">利润增长</h6>
                        <p class="card-text display-6" id="profit-growth">--</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-info">
                    <div class="card-body">
                        <h6 class="card-title">客户满意度</h6>
                        <p class="card-text display-6" id="customer-satisfaction">--</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 图表模块 -->
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">产品月销量对比</h5>
                <div id="salesChart" style="width: 100%; height: 400px;"></div>
            </div>
        </div>
            </div>
            <div class="col-md-3 mb-3">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">今日访问</h5>
                        <p class="card-text display-5">2345</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-3">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">待处理消息</h5>
                        <p class="card-text display-5">12</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-3">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">存储使用</h5>
                        <p class="card-text display-5">65%</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}


{% block extra_js %}
<script src="{% static 'js/echarts.min.js' %}"></script>

<script>
    // 初始化图表
    const salesChart = echarts.init(document.getElementById('salesChart'));
    
    // 获取实时数据函数
    function fetchRealTimeData() {
        fetch('/api/dashboard-data')
            .then(response => response.json())
            .then(data => {
                // 更新数据卡片
                document.getElementById('month-sales').textContent = data.month_sales;
                document.getElementById('user-views').textContent = data.user_views;
                document.getElementById('profit-growth').textContent = data.profit_growth + '%';
                document.getElementById('customer-satisfaction').textContent = data.customer_satisfaction + '%';
                
                // 更新图表
                const option = {
                    xAxis: {
                        type: 'category',
                        data: data.product_names
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: data.product_sales,
                        type: 'bar',
                        itemStyle: {
                            color: '#4e73df'
                        }
                    }]
                };
                salesChart.setOption(option);
            })
            .catch(error => console.error('数据获取失败:', error));
    }
    
    // 初始加载数据
    fetchRealTimeData();
    
    // 每5秒刷新数据
    setInterval(fetchRealTimeData, 5000);
    
    // 图表点击事件
    salesChart.on('click', function(params) {
        alert(`查看${params.name}详细数据：月销量${params.value}件`);
    });
</script>
{% endblock %}

